<style scoped>
  .Central {
    width: 100%;
    height: 1000px;
  }

  .bm-view {
    width: 100%;
    height: 950px;
  }
</style>

<template>
  <div>
    <div class="Central">
      <!--地图-->
      <baidu-map
        class="bm-view"
        @mousemove="syncPolygon"
        @dblclick="DoubleClick"
        @rightdblclick="Rightdblclick"
        @maptypechange="MapType"
        @rightclick="newPolygon"
        @ready="MapHandler"
        :center="this.center"
        :zoom="this.zoom"
        :min-zoom=10
        :double-click-zoom="false"
        :scroll-wheel-zoom="true"
        :continuous-zoom="true"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
        @click="paintPolygon">

        <!--行政区-->
        <bm-boundary name="三亚市"
                     :mass-clear=false
                     @mouseover="enterSanYa"
                     @mouseout="outSanYa"
                     :strokeWeight="2"
                     strokeStyle="solid"
                     :fillColor=this.SanYaColor
                     strokeColor="rgba(91, 4, 13, 1)"></bm-boundary>
        <bm-boundary name="三亚市吉阳区"
                     @mouseover="enterJiYang"
                     :mass-clear=false
                     @mouseout="outJiYang"
                     strokeStyle="dashed"
                     :strokeWeight="2"
                     :fillColor=this.JiYangColor
                     strokeColor="none"></bm-boundary>
        <bm-boundary name="三亚市海棠区"
                     @mouseover="enterHaiTang"
                     @mouseout="outHaiTang"
                     strokeStyle="dashed"
                     :mass-clear=false
                     :strokeWeight="2"
                     :fillColor=this.HaiTangColor
                     strokeColor="none"></bm-boundary>
        <bm-boundary name="三亚市天涯区"
                     :mass-clear=false
                     @mouseover="enterTianYa"
                     @mouseout="outTianYa"
                     strokeStyle="dashed"
                     :strokeWeight="2"
                     :fillColor=this.TianYaColor
                     strokeColor="none"></bm-boundary>
        <bm-boundary name="三亚市崖州区"
                     @mouseover="enterYaZhou"
                     @mouseout="outYaZhou"
                     :mass-clear=false
                     strokeStyle="dashed"
                     :strokeWeight="2"
                     :fillColor=this.YaZhouColor
                     strokeColor="none"></bm-boundary>
      </baidu-map>
      <el-button type="primary" size="mini" round @click="Position3">定位</el-button>
    </div>
    <map-info ref="addinfo" ></map-info>
    <map-info-table ref="MapinfoTable"></map-info-table>

  </div>
</template>

<script>
  //引入map实例
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import mapInfo from './addInfoFrom.vue'
  import MapInfoTable from './MapInfoTable.vue'
  import Home from './Home.vue'
  import {deleOneCover, getOneCover, saveCover, getAllCover} from '@/api/userApi' //导入接口工具
  export default {
    //组件注册
    components: {
      BaiduMap,
      mapInfo,
      MapInfoTable,
      Home
    },
    data() {
      return {
        center: {lng: 109.44899533628981, lat: 18.3405664516992},//中心经纬度经度： 109.44899533628981 , 维度： 18.3405664516992
        zoom: 11,
        SanYaColor: "none",
        JiYangColor: 'none',
        YaZhouColor: "none",
        TianYaColor: "none",
        HaiTangColor: "none",
        cover:null,  //定位到指定覆盖物的坐标

      }
    },
    methods: {

      //加载覆盖物后再定位
      Position3(){
        console.log( "cover", this.cover.mapCover[0].lng,this.cover.mapCover[0].lat)
        var new_point = new BMap.Point(this.cover.mapCover[0].lng,this.cover.mapCover[0].lat);
        map.panTo(new_point);

      },


      /*===============================================业====务====事====件=============================================*/
      //定位到指定覆盖物
      Position(){
        var that = this
       // map.clearOverlays()  //清除地图上所有的覆盖物,避免重叠
        boundary();
        function boundary() {
          if (that.$route.params.cover!=null){
          that.cover = that.$route.params.cover  //获取当前索引的覆盖物信息
          }
          var conun = 1
          for (var j = 0; j < conun; j++) {
            (function (index) {
              var ply = new BMap.Polygon(that.cover.mapCover, {fillColor: that.cover.color,strokeWeight: 2, strokeColor: that.cover.color}); //建立多边形覆盖物
              //  创建右键菜单
              var infoWindow = new BMapLib.SearchInfoWindow(map, "第"+index+"个", {
                title: "地块信息", //标题
                width: 80, //宽度
                height: 60, //高度
                panel: "panel", //检索结果面板
                enableAutoPan: true, //自动平移
                searchTypes: []
              });

              map.addOverlay(ply);  //添加覆盖物
              var WindowState = true
              /*====================右===============键===============菜===============单==========================*/
              var polygonMenu=new BMap.ContextMenu();
              polygonMenu.addItem(new BMap.MenuItem('修改信息',  function addMapInfo() {
                  that.$refs.addinfo.showForm = !that.$refs.addinfo.showForm //弹出表单
                  WindowState = false//关窗
              } ));
              polygonMenu.addItem(new BMap.MenuItem('重绘地形',  function editOverlay() {
                  WindowState = false
                  ply.enableEditing() //开启编辑;

              } ));
              polygonMenu.addItem(new BMap.MenuItem('结束绘制',  function saveOverlay() {
                WindowState = true

                ply.disableEditing() //完成编辑;
              } ));
              polygonMenu.addItem(new BMap.MenuItem('删除地块',  function deleteOverlay() {
                deleOneCover(that.cover.mapCover).then(response => {
                  map.removeOverlay(ply);
                  console.log("删除成功")
                })
              } ));
              ply.addContextMenu(polygonMenu);//添加右键菜单
              /*=======================================事=======================件==========================*/
              //进入覆盖物事件（弹窗）
              ply.addEventListener('mouseover', function () {
                //把当前的覆盖物放到全局
                that.$refs.addinfo.ply = that.cover
                ply.addEventListener("mousemove", function (e) {
                  if (WindowState===true) {
                    infoWindow.open(e.point);
                  }else if (WindowState===false) {
                    infoWindow.close();
                  }
                })//mousemove
              })//mouseover

              //双击事件
              ply.addEventListener('dblclick', function () {
                //传值并跳转到Home页面
              //  that.$router.push({name:'Home',params:{Cover:that.cover}})
              })
              //离开覆盖物事件(关窗)
              ply.addEventListener('mouseout', function () {
                infoWindow.hide();
              })//mouseout

              //鼠标滚轮事件
              map.addEventListener("zoomend", function (e) {
                //条件：缩放几倍小于12就隐藏覆盖物,否则就显示
                if (that.zoom < 12) {
                  ply.hide()
                } else {
                  ply.show()
                }
              })
              /*==========================================事=======================件==========================*/
            })(j)
          }//for
        }
        setTimeout(function () {
          that.zoom = 13
        }, 500);
        //定时加载
        setTimeout(function () {
          that.Position3()
        }, 500);

      },

      /*=====================================================属====性====事====件===============================================*/

      //离开多边形触发
      outPolygon() {
        //还原
        this.polygonOpacity = 0.7
      },
      //进入三亚
      enterSanYa() {
      },
      //离开三亚
      outSanYa() {

      },
      //进入崖州
      enterYaZhou() {
        if (this.zoom < 12) {
          this.YaZhouColor = "rgba(15, 206, 69, 0.49)"
        }
      },
      //离开崖州
      outYaZhou() {
        this.YaZhouColor = "none"
      },
      //进入天涯
      enterTianYa() {
        if (this.zoom < 12) {
          this.TianYaColor = "rgba(255, 128, 0, 0.76)"
        }
      },
      //离开天涯
      outTianYa() {
        this.TianYaColor = "none"
      },
      //进入海棠
      enterHaiTang() {
        if (this.zoom < 12) {
          this.HaiTangColor = "rgba(0, 64, 255, 0.66)"
        }
      },
      //离开海棠
      outHaiTang() {
        this.HaiTangColor = "none"
      },
      //进入吉阳
      enterJiYang() {
        if (this.zoom < 12) {
          this.JiYangColor = "rgba(255, 0, 140, 0.44)"
        }
      },
      //离开吉阳
      outJiYang() {
        this.JiYangColor = "none"
      },
      /*=========================监====听====事====件==================================================================================*/
      //mousemove 监听鼠标位移
      syncPolygon(e) {
        window.e = e  //存入全局
        //缩放级别大于11，鼠标再次滑动，机会清除所有行政区颜色
        if (this.zoom > 11) {
          this.JiYangColor = 'none',
            this.YaZhouColor = "none",

            this.TianYaColor = "none",
            this.HaiTangColor = "none"
        }
      },

      //左键单击 click
      paintPolygon(e) {
        console.log("鼠标点击处经度：", e.point.lng, ",", "维度：", e.point.lat)
      },
      //右键单击事件  rightclick
      newPolygon(e) {
      },

      //地图缩放结束后触发
      syncCenterAndZoom(e) {
        //缩放级别大于11后，还原所有行政区颜色
        if (this.zoom > 11) {

          this.SanYaColor = "none",
            this.JiYangColor = 'none',
            this.YaZhouColor = "none",
            this.TianYaColor = "none",
            this.HaiTangColor = "none"
          //缩放级别小于12后，显示所有行政区颜色
        } else if (this.zoom < 12) {

          this.YaZhouColor = "rgba(15, 206, 69, 0.49)"
          this.TianYaColor = "rgba(255, 128, 0, 0.76)"
          this.HaiTangColor = "rgba(0, 64, 255, 0.66)"
          this.JiYangColor = "rgba(255, 0, 140, 0.44)"
        }

        const {lng, lat} = e.target.getCenter()
        //  console.log("经度：", lng, ",", "维度：", lat)
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
      },

      //左键双击  dblclick
      DoubleClick() {
        console.log("双击了")
      },
      Rightdblclick() {
        console.log("双击了",)
      },
      //地图类型变化时触发
      MapType() {
        console.log("地图类型变化了 ")
      },
      //地图初始化
      MapHandler({BMap, map}) {
       var that = this
        window.map = map;//将map变量存储在全局
        map.setCenter("三亚市");  // 设置地图显示的城市 此项是必须设置的
        var bdary = new BMap.Boundary();//创建行政区域搜索的对象实例

        //鼠标滚轮事件
        map.addEventListener("zoomend", function (e) {
          console.log("缩放级别", e.target.Va)
        })

        //行政区遮罩
        function getBoundary() {
          //三亚市遮罩+++++++++
          bdary.get("三亚市", function (rs) {       //获取行政区域
            var EN_JW = "180, 90;";         //东北角
            var NW_JW = "-180,  90;";       //西北角
            var WS_JW = "-180, -90;";       //西南角
            var SE_JW = "180, -90;";        //东南角
            //4.添加环形遮罩层
            var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
              strokeColor: "none",  //线颜色
              fillColor: "rgba(244, 244, 244, 1)",  //填充颜色
              fillOpacity: 1,     //线透明度
              strokeWeight: 0.005,       //线宽度

            }); //建立多边形覆盖物
            //鼠标进入遮罩触发
            ply1.disableMassClear()//禁止被清除
            ply1.addEventListener("mouseover", function () {

            })
            map.addOverlay(ply1);
          });

        }

        //定时加载
        setTimeout(function () {
          getBoundary();
          that.Position()
        }, 100);



      }//MapHandler
    },
    mounted() {

    }
  }
</script>

